<!--  -->
<template>
  <div class="container">
    <van-nav-bar :title="activityname" />
    <div class="vote_banner">
      <img src="../assets/vote_img.jpeg">
    </div>
    <VoteInfo></VoteInfo>
    <div class="time_container">
      距离活动结束
      <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" style="color:#ee0a24;font-weight:bold" />
    </div>
    <div class="rank_voteinfo">
      <van-cell title="投票开始" icon="clock-o" value="2020-12-23 09:00:00" />
      <van-cell title="投票结束" icon="clock-o" value="2021-01-10 18:00:00" />
    </div>
    <div class="rank_first">
      <img src="../assets/headimg1.jpg">
      <div class="firstrank_title">
        <span style="font-weight:bold;margin-bottom:10px">张三</span>
        <div style="font-size:14px">占领了封面
        </div>
      </div>
    </div>
    <!-- <div class="top_three_list">
      <div v-for="(item,index) in memberlist" :key="index">
        <div class="top_three" v-if="index==0||index==2">
          <div class="first-box">
            <img :src="require('../assets/' + item.headimg + '.jpg')" class="headimg">
            <img src="../assets/hg.png" class="top_hg">
            <span class="rank_title">第{{index+1}}名</span>
          </div>
          <div class="member_info">
            <div> {{item.nickname}}</div>
            <div>{{item.count}}票</div>
          </div>
        </div>
        <div class="top_three" v-if="index==1">
          <div class="second-box">
            <img :src="require('../assets/' + item.headimg + '.jpg')" class="headimg">
            <img src="../assets/hg.png" class="top_hg">
            <span class="rank_title">第{{index+1}}名</span>
          </div>
          <div class="member_info">

          </div>
        </div>
      </div>

    </div> -->
    <div class="rank_container">
      <div v-for="(item,index) in memberlist" :key="index">
        <div class="rank_item">
          <div class="member_info">
            <span
              :class="['rank_number',index==0?'first':'',index==1?'second':'',index==2?'third':'']">{{index+1}}</span>
            <div class="member_head">
              <img :src="require('../assets/' + item.headimg + '.jpg')" class="headimg" />
              <img src="../assets/rank_first.png" v-if="index==0" class="hg">
              <img src="../assets/rank_second.png" v-if="index==1" class="hg">
              <img src="../assets/rank_third.png" v-if="index==2" class="hg">
            </div>
            <span :class="[index==0?'first':'',index==1?'second':'',index==2?'third':'']"
              style="font-weight:bold">{{item.nickname}}</span>

          </div>
          <!-- <van-button type="primary" class="vote_button">投TA一票</van-button> -->
          <span
            :class="['rank_count',index==0?'first':'',index==1?'second':'',index==2?'third':'']">{{item.count}}票</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import VoteInfo from "../components/Vote_info.vue"
  export default {
    data() {
      return {
        activityname: "",
        time: 30 * 60 * 60 * 1000,
        memberlist: [{
            nickname: "张三",
            headimg: "headimg1",
            count: 8765
          },
          {
            nickname: "李四",
            headimg: "headimg2",
            count: 6543
          }, {
            nickname: "王五",
            headimg: "headimg3",
            count: 5432
          }, {
            nickname: "赵六",
            headimg: "headimg4",
            count: 3213
          },
          {
            nickname: "张三",
            headimg: "headimg1",
            count: 2131
          },
          {
            nickname: "李四",
            headimg: "headimg2",
            count: 1232
          }, {
            nickname: "王五",
            headimg: "headimg3",
            count: 754
          }
        ]
      };
    },

    components: {
      VoteInfo
    },

    computed: {},
    created() {
      this.activityname = this.$store.state.title
    },

    methods: {}
  }
</script>
<style scoped lang="less">
  .container {
    width: 100%;
    background: #f6f8fa;
    padding-bottom: 100px;

    .vote_banner {
      width: 100%;
      margin: 0 auto;

      img {
        width: 95%;
        box-shadow: 5px 5px 15px rgb(223, 223, 223);
        border-radius: 5px;
        margin-top: 5px;
      }
    }

    .time_container {
      width: 95%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      padding: 15px 10px;
      align-items: center;
      box-sizing: border-box;
      background: white;
      font-size: 14px;
      border-radius: 5px;
    }

    .rank_voteinfo {
      width: 95%;
      margin: 0 auto;
      margin-top: 20px;

      .van-cell__title {
        flex: inherit !important;
      }
    }

    .top_three_list {
      .member_info {
        position: absolute;
        right: 10px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .top_three {
        width: 95%;
        background: white;
        margin: 0 auto;
        height: 12rem;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: space-between;

        .first-box {
          position: absolute;
          top: -1.33333rem;
          left: -.66667rem;
          width: 60%;
          height: 100%;
          background: #ee0a2415;
          border-radius: 0 60% 50% 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .headimg {
            border-radius: 100%;
            width: 80px;
            height: 80px;
            border: 4px solid #b93444;
            position: relative;
            top: 20px;
            left: 20px;
          }

          .top_hg {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 40px;
            left: 30px;
          }

          .rank_title {
            position: absolute;
            top: 130px;
            left: 60px;
            padding: 5px 20px;
            background: #b93444;
            border-radius: 10px;
            color: white;
            font-size: 12px;
          }
        }

        .second-box {
          position: absolute;
          right: -1.33333rem;
          width: 10rem;
          height: 10rem;
          background: #ee0a2415;
          border-radius: 70%;

          .headimg {
            border-radius: 100%;
            width: 50%;
            height: 50%;
            border: 4px solid #b93444;
            position: relative;
            top: 40px;
            left: -20px;
          }

          .top_hg {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 20px;
            left: 90px;
            transform: rotate(70deg);
          }

          .rank_title {
            position: absolute;
            top: 110px;
            left: 25px;
            padding: 5px 20px;
            background: #b93444;
            border-radius: 10px;
            color: white;
            font-size: 12px;
          }
        }
      }
    }


    .rank_first {
      position: relative;
      width: 95%;
      margin: 10px auto;

      img {
        width: 100%;
      }

      .firstrank_title {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #00000020;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        font-weight: bold;
        padding: 20px;
        font-size: 20px;
        box-sizing: border-box;
        color: white;
      }
    }

    .rank_container {
      margin-top: 10px;

      .first {
        color: #ee0a24;
      }

      .second {
        color: #ff915c;
      }

      .third {
        color: #f7c68b;
      }

      .vote_button {
        background-image: linear-gradient(to right, #ffd52e, #fe721f);
        border-width: 0;
        border-radius: 20px;
        font-size: 12px;
        padding: 2px 10px;
        height: 25px;
      }

      .rank_item {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding: 10px 20px;
        box-sizing: border-box;
        background: white;
        border-bottom: 1px solid rgb(243, 243, 243);

        .member_info {
          display: flex;
          align-items: center;

          .rank_number {
            font-size: 20px;
            font-weight: bold;
            margin-right: 20px;
          }

          .member_head {
            position: relative;

            .headimg {
              width: 50px;
              height: 50px;
              border-radius: 100%;
              margin-right: 20px;
            }

            .hg {
              position: absolute;
              top: -10px;
              left: -8px;
              transform: rotate(-30deg);
              width: 25px;
              height: 25px;
            }
          }
        }

        .rank_count {
          font-size: 15px;
          margin-left: 10px;
          font-weight: bold;
        }
      }
    }

  }
</style>